<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function defineReactive(obj,key,value){
            Object.defineProperty(obj,key,{
                get: function reactiveGetter(){
                    console.log('收集依赖项放在dep数组中');
                    return value
                },
                set: function reactiveSetter(newVal){
                    console.log('更新数据了，通知所有依赖项，重新拿值');
                    // 更新数据
                    value = newVal
                }
            })
        }


        function observe(obj) {
            if (typeof obj !== 'object' || obj === null) return

            for (let key of Object.keys(obj)) {
                // 遍历对象后，把对象每一个属性都交给defineReactive函数，进行响应处理
                defineReactive(obj, key, obj[key])
            }
        }

        const vm = {
            _data: {
                name: 'laowang',
                movies: [{
                        id: "001",
                        movieName: "绿皮书"
                    },
                    {
                        id: "002",
                        movieName: "迷雾"
                    },
                ],
                wea: {
                    type: "下雨",
                    num: 28,
                },
            }
        }

        // 调用observe函数，把数据给到observe，进行数据响应式操作
        observe(vm._data)
    </script>
</body>

</html>